<template>
  <!-- 活动详情页 -->
  <view class="jointDefenseDetail">
    <view
      class="wrapper"
      :class="
        options.index == 0 || (options.index == 1 && options.hostingStatus == 1)
          ? 'wrapperHeight'
          : ''
      "
    >
      <view class="wrapper-item">
        <view class="wrapperTitle">{{ detail.activityName || "" }}</view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              申报人员
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.declarationPersonnel }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              联系方式
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.mobile }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              举办单位
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.hostUnit }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              举办地点
            </view>
            <view class="sign"> ：</view>
            <view class="rt"> {{ detail.activityLocation }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              举办时间
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.beginTime }}至{{ detail.endTime }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              活动对象
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.activityObject }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              参加人数
            </view>
            <view class="sign"> ：</view>
            <view class="rt"> {{ detail.activityNumber || 0 }}人 </view>
          </view>

          <view class="conText"> {{ detail.activityContent }} </view>
          <view style="padding-bottom: 20rpx">
            <u-line color="#F1EEEE"></u-line>
          </view>

          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              申请时间
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.createTime }}
            </view>
          </view>
          <view
            class="item-info"
            v-if="options.index == 1 && options.hostingStatus != 3"
          >
            <view class="textAlign lt">
              <text class="square"></text>
              通过时间
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.examineTime }}
            </view>
          </view>
          <view class="item-info" v-if="options.index == 2">
            <view class="textAlign lt">
              <text class="square"></text>
              拒绝时间
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.examineTime }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              审核单位
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.policeAgencyName || "" }}
            </view>
          </view>
          <view class="item-info" v-if="options.index != 0">
            <view class="textAlign lt">
              <text class="square"></text>
              审核民警
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.policeName }}
            </view>
          </view>
          <view class="item-info" v-if="options.index == 2">
            <view class="textAlign lt">
              <text class="square"></text>
              拒绝理由
            </view>
            <view class="sign"> ：</view>
            <view class="rt breakAll">
              {{ detail.examineReasons }}
            </view>
          </view>
        </view>
      </view>

      <view
        class="wrapper-item"
        v-if="options.index == 1 && options.hostingStatus == 3"
      >
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 取消详情 </view>
        </view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              取消时间
            </view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.cancelTime }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">
              <text class="square"></text>
              取消理由
            </view>
            <view class="sign"> ：</view>
            <view class="rt breakAll">
              {{ detail.cancelReasons }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="btns"
      v-if="
        options.index == 0 || (options.index == 1 && options.hostingStatus == 1)
      "
    >
      <button
        class="lookbtn"
        type="primary"
        style="width: 100%"
        @click="detailHandle"
      >
        {{ options.index == 0 ? "撤回" : "活动取消" }}
      </button>
    </view>
  </view>
</template>

<script>
import {
  activityDeclarationDetail,
  activityDeclarationRevocation,
} from "@/api/myself.js";
import {
  handleClickRouter,
  Toast,
  navBack,
  pvwImage,
  hiddenInfo,
  formatters,
  idCardParse,
} from "@/utils/util.js";

export default {
  name: "jointDefenseDetail",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      detail: {},
      options: {},
      imgPrefix: uni.getStorageSync("imgPrefix"),
      allCode: uni.getStorageSync("allCode"),
    };
  },
  onLoad(options) {
    this.options = JSON.parse(decodeURIComponent(options.data));
    this.getList();
  },
  methods: {
    handleClickRouter,
    pvwImage,
    hiddenInfo,
    formatters,
    idCardParse,
    detailHandle() {
      if (this.options.index == 0) {
        uni.showModal({
          title: "撤回",
          content: "撤回后不可恢复，请谨慎操作！",
          confirmColor: "#2488F5",
          success: (res) => {
            if (res.confirm) {
              activityDeclarationRevocation({ id: this.detail.id }).then(
                (res) => {
                  if (res.code == 200) {
                    Toast("撤回成功");
                    uni.setStorageSync("declarationAct", true);
                    navBack();
                    return;
                  }
                  Toast(res.message);
                }
              );
            }
          },
        });
      }

      if (this.options.index == 1) {
        uni.navigateTo({
          url: `/declarationAct/actDetail/actIsCancelled?id=${this.detail.id}`,
        });
      }
    },
    getList() {
      activityDeclarationDetail({ id: this.options.id }).then((res) => {
        if (res.code == 200) {
          this.detail = res.result;
        }
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f9f9f9 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.jointDefenseDetail {
  flex: 1;
  background-color: #f9f9f9;

  .wrapper {
    margin: 20rpx;
    overflow-y: auto;

    .wrapper-item {
      margin-bottom: 1vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
      border-radius: 10rpx;
      width: 702rpx;

      .wrapperTitle {
        text-align: center;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
      }

      .wrapper-body {
        padding-top: 20px;
      }

      .item-info {
        display: flex;
        margin-bottom: 25rpx;

        .lt {
          height: 34rpx;
          font-size: 26rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #828282;
          // width: 110rpx;
          min-width: 150rpx;

          .square {
            display: inline-block;
            width: 18rpx;
            height: 18rpx;
            background: #dcdcdc;
            margin-right: 15rpx;
            transform-origin: bottom right;
            transform: rotate(45deg);
          }
        }

        .sign {
          color: #828282;
        }

        .rt {
          width: calc(100% - 170rpx);
          font-size: 26rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          margin-left: 6rpx;
        }
        .rtBlue {
          color: #2488f5;
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;
          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }
        }
      }
    }

    .conText {
      margin-bottom: 25rpx;
      word-break: break-all;
      color: #333333;
      font-size: 30rpx;
      font-weight: 500;
    }
  }

  .wrapperHeight {
    height: calc(100vh - 92px);
  }

  .btns {
    button {
      border-radius: 44rpx;
    }
  }
}
</style>
